{% extends 'base.html' %}

{% block content %}

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend id="titleLeg">防火墙</legend>
    </fieldset>

    <div class="demoTable">
        搜索ID：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
        <span id="create">
            {# 从 js 渲染添加 /#}
        </span>
    </div>

    <table class="layui-hide" id="test" lay-filter="test"></table>

    <div>
        <p>
            <small>说明: 除北京内网映射关系有序列跟序列ID</small>
        </p>
        <p>
            <small> 廊坊序号跟序列ID从40000开始</small>
        </p>
        <p>
            <small> 腾讯云序号跟序列ID从50000开始</small>
        </p>
    </div>
{% endblock %}

{% block script %}
    {{ super() }}

    <script>
        $(window).on('load', function () {
            Title(2)
        })
    </script>

    <script>
        layui.use('table', function () {
            var table = layui.table;
            // _pids 获取是哪个位置的ID号
            var _pids = document.location.pathname.split('/')[2];
            $("#create").html('<a href="/fwmap/fwmapcreate/' + _pids + '">' +
                '<button type="button" class="layui-btn layui-btn-primary">添加</button> ' +
                '</a>');

            table.render({
                elem: '#test'
                {# 以下注释的两种方式 都不行 #}
                {#, url: '{{ url_for("fwmap.FwmapindexApi") }}' + _pids#}
                {#, url: '{{ url_for("fwmap.FwmapindexApi", pid=_pids) }}'#}
                , url: '/fwmap/FwmapindexApi/' + _pids
                , cols: [[
                    {#{field: 'id', title: 'ID', width: 80, sort: true}#}
                    {field: 'serialnumber', title: '序号', width: 80, sort: true}
                    , {field: 'protocols', title: '协议', width: 100, sort: true}
                    , {field: 'sequenceid', title: '序列ID', width: 100}
                    , {field: 'inaddress', title: '内网地址', width: 120}
                    , {field: 'inport', title: '内网端口', width: 100}
                    , {field: 'outaddress', title: '外网地址', width: 120}
                    , {field: 'outport', title: '外网地址', width: 120}
                    , {field: 'position_id', title: '机房位置', width: 120}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo'}]]
                , page: true
            });
            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                var _dataid = data.id;
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        obj.del();
                        layer.close(index);
                        $.ajax({
                            url: '/fwmap/FwmapindexApi/' + _dataid,
                            type: 'delete',
                            async: false,
                            success: function (data) {
                                if (data.code == 10000) {
                                    layer.confirm('删除成功');
                                } else {
                                    layer.confirm('删除失败');
                                }
                            }
                        })
                    });
                } else if (obj.event === 'edit') {
                    {#console.log('/fwmap/fwmapedit/' + _pids + '/' + obj.data.id);#}
                    // 第一个Pid 是指的哪个区域的， 第二个ID指的是哪个映射关系
                    window.open('/fwmap/fwmapedit/' + _pids + '/' + obj.data.id,"_self");
                }
            });

        });


    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit" id="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" id="delete">删除</a>
    </script>


{% endblock %}

